<template>
  <div class="layout-container">
    <!-- 左侧菜单栏 -->
    <div :style="{ width: isCollapse ? '64px' : '208px' }">
      <el-menu
          background-color="#001529"
          text-color="#fff"
          active-text-color="#1890ff"
          style="width: 100%; height: 100vh;"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          unique-opened
          @select="handleMenuSelect"
      >
        <!-- 左侧菜单栏的顶部条 -->
        <el-row style="padding-top: 10px;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <el-avatar src="/imgs/mqm.jpg" style="width: 35px; height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse ? 0 : 13">
            <span style="color: #fff; font-weight: bold; position: relative; top: 8px; left: 2px;">影城后台</span>
          </el-col>
        </el-row>
        
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px;"><UserFilled /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item index="/employee">员工列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px;"><Film /></el-icon>
            <span>片源管理</span>
          </template>
          <el-menu-item index="/movie">影片列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px;"><Shop /></el-icon>
            <span>门店管理</span>
          </template>
          <el-menu-item index="/Information">信息管理</el-menu-item>
          <el-menu-item index="/scheduling">排片</el-menu-item>
          <el-menu-item index="/schedulingInformation">排片详情</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px;"><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px;"><Ticket /></el-icon>
            <span>会员管理</span>
          </template>
          <el-menu-item index="/member">会员列表</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧内容区域 -->
    <div :style="{ width: isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)' }">
      <el-header style="height: 10vh; background-color: #fff; padding-top: 22px;">
        <!-- 折叠图标与员工名选项 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size: 20px;" @click="toggleSidebar"><Expand /></el-icon>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position: absolute; right: 20px;">
              <span style="font-size: 19px; font-weight: bold;">
                {{ employee.employeeName }}
                <el-icon><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="position: relative; top: 20px;">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="height: 90vh; padding: 0; overflow-y: auto;">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {useRouter, useRoute} from "vue-router";
import { UserFilled, Film, Shop, User, Ticket } from '@element-plus/icons-vue'

// 定义变量控制左侧菜单栏是否折叠
const isCollapse = ref(false);

// 定义方法处理左侧菜单栏是否折叠
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value;
};

// 直接调用window对象的自定义方法getEmployee(),获取当前登录的员工对象
const getEmployee = () => {
  return window.getEmployee();
};

// 初始化员工数据
const employee = ref(getEmployee());

// 定义退出登录的方法
const handleLogout = () => {
  if (confirm("您确认要退出登录吗?")) {
    localStorage.removeItem("employee");
    localStorage.removeItem("breadCrumb");
    window.location.href = "/login";
    employee.value = null;
  }
};

// 定义维护菜单项index与面包屑导航的对应关系
const menuMap = {
  "/employee": ["员工理", "员工列表"],
  "/scheduling": ["门店管理", "排片"],
  "/movie": ["片源管理", "影片列表"],
  "/schedulingInformation": ['门店管理','排片详情'],
  "/Information": ["门店管理", "信息管理"],
  "/Information/AddCinema": ["门店管理", "添加影院"],
  "/user": ["用户管理", "用户列表"],
  "/member": ["会员管理", "会员列表"],

}

// 定义一个变量用来保存当前面包屑导航值
const breadcrumb = ref(JSON.parse(localStorage.getItem("breadCrumb")) || ["员工管理", "员工列表"]);

// 处理菜单选择
const handleMenuSelect = (index) => {
  breadcrumb.value = menuMap[index] || [];
  localStorage.setItem("breadCrumb", JSON.stringify(breadcrumb.value));
};

// 获取Vue Router实例
const router = useRouter();
const route = useRoute();

// 监听路由变化，更新面包屑
onMounted(() => {
  updateBreadcrumb(route);
});

watch(
    () => route.path,
    (newPath) => {
      updateBreadcrumb({path: newPath});
    }
);

const updateBreadcrumb = (currentRoute) => {
  const currentPath = currentRoute.path;
  const breadcrumbItems = menuMap[currentPath] || ["未知", "未知"];
  breadcrumb.value = breadcrumbItems;
  localStorage.setItem("breadCrumb", JSON.stringify(breadcrumbItems));
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.el-menu {
  width: 100%;
  height: 100vh;
  border-right: none;
}

:deep(.el-menu) {
  border-right: none !important;
}
</style>